<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title >{{ 'Patient Register' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="padding-top: 0;">
    <div class="patientBg">
      <ion-label class="registerWords">{{ 'Patient' | translate }}</ion-label>
      <!-- <ion-label class="registerWords">{{ patient | translate }}</ion-label> -->
    </div>

    <div class="inputBoxOne">
        <div style="width: 75vw; display:flex;justify-content:space-between;margin: 0 auto;border-bottom: 2px solid #cccccc;align-items:center;">
            <img src="./../../../../assets/img/iconphone.png" alt="" class="iconStyle2">
            <ion-select cancelText="{{'Cancel' | translate}}" okText="{{'Confirm' | translate}}" [(ngModel)]="countryCode" style="width: 15vw;float:left;font-size: 14px;padding-top:11px" placeholder="CC">
              <ion-select-option *ngFor="let item of codeArr">{{item}}
              </ion-select-option>
            </ion-select>
            <ion-input placeholder="{{ 'Phone' | translate }}" clearInput class="inputStyle2" [(ngModel)]="phoneNum"></ion-input>
        </div>
        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconmessage.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Security_Code' | translate }}" clearInput class="inputStyle" style="width:calc(100% - 34vw)" [(ngModel)]="phoneCode"></ion-input>
            <ion-button color="care" style="width:calc(100% - 52vw);color: white;font-size: 12px;" size="small" (click)="getCode()" [disabled]="!verifyCode.disable">
              {{verifyCode.verifyCodeTips | translate}}
            </ion-button>
        </div>
        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconpassword.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Password' | translate }}" clearInput class="inputStyle" [(ngModel)]="password"></ion-input>
        </div>
        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconpassword.png" alt="" class="iconStyle">
            <ion-input placeholder="{{ 'Confirm Password' | translate }}" clearInput class="inputStyle" [(ngModel)]="confirm"></ion-input>
        </div>
        <div class="inputBox" style="margin-top: 1vh;width: 75vw">
            <img src="./../../../../assets/img/iconemail.png" alt="" class="iconStyle" style="margin-top: 2vh">
            <ion-input placeholder="{{ 'Email' | translate }}" clearInput class="inputStyle" [(ngModel)]="emailNum" type="email"></ion-input>
        </div>
        <ion-button shape="round" color="care" expand="block" class="defaultButton" style="margin-top: 40px;width: 75vw" (click)="registerIme()">{{ 'Register' | translate }}</ion-button>

        <div class="privacyPolicy">
         <span *ngIf="sysLang == 'zh-cn'">
          登录/注册即同意<span (click)="toPrivacy()" style="text-decoration: underline;color: #009e41;">信挂号App《用户使用与隐私协议</span>
         </span>
         <span *ngIf="sysLang == 'en-us'">
          Sign in/Sign up means that the user fully accept <span (click)="toPrivacy()" style="text-decoration: underline;color: #009e41;">Privacy Policy of EasyDoc App</span>
         </span>
        </div>
        <div class="hasAccount">
          <ion-label style="float: right;" color="care" (click)="toPatientLogin()">{{ 'Login Now' | translate}}</ion-label>
          <ion-label style="float:right; color: gray">{{ 'Have account' | translate}}?</ion-label>
        </div>
    </div>
  </div>

</ion-content>
